$("header").load("head.html")
$("footer").load("footer.html")



$(".small-box").mouseover(function(){
$(".f-xingxikuang").css({
    display: "none"

})
}).mouseout(function(){
$(".f-xingxikuang").css({
    display : "block"
})
})

class Magnifier {

    constructor(small, big, mask, select) {
        this.select = select;
        this.small = small;
        this.big = big;
        this.mask = mask;
        console.log(this.mask);
        this.eventBind();
    };


    //绑定事件
    eventBind() {
        this.mouseover();
        this.mouseout();
        this.mousemove();
        let that = this;
        console.log(select);


        this.select.forEach(element => {
            element.onclick = function () {
                let src = `url(${this.firstElementChild.src})`;
                that.big.style.backgroundImage = src;
                that.small.style.backgroundImage = src;
            };
        });
    };


    //鼠标移入
    mouseover() {
        let that = this;

        this.small.onmouseover = function () {
            that.big.style.display = "block";
            that.mask.style.display = "block";


        };
    };


    //鼠标移出
    mouseout() {
        let that = this;

        this.small.onmouseout = function () {
            that.big.style.display = "none";
            that.mask.style.display = "none";
        };
    };




    //鼠标移动
    mousemove() {
        let that = this;

        this.small.onmousemove = function (evt) {
            let e = evt || event;

            let left = e.pageX - this.offsetLeft - that.mask.offsetWidth / 2;
            let top = e.pageY - this.offsetTop - that.mask.offsetHeight / 2;
            
            let maxleft = this.offsetWidth - that.mask.offsetWidth;
            if (left < 0) {
                left = 0;
            };
            if (left > maxleft) {
                left = maxleft;
            };

            let maxtop = this.offsetHeight - that.mask.offsetHeight;
            if (top < 0) {
                top = 0;
            };
            if (top > maxtop) {
                top = maxtop;
            };

            that.mask.style.top = top + "px";
            that.mask.style.left = left + "px";

            let x = that.big.offsetWidth * left / that.mask.offsetWidth;
            let y = that.big.offsetHeight * top / that.mask.offsetHeight;

            that.big.style.backgroundPositionX = -x + "px";
            that.big.style.backgroundPositionY = -y + "px";
        };

    };
}


let small = document.querySelector(".small-box");
let big = document.querySelector(".big-box");
let mask = document.querySelector(".mask");

let select = document.querySelectorAll(".select div")
let mg = new Magnifier(small, big, mask, select);
